<script lang="ts" setup>

import {Page} from "@/common/Page.ts";
import {ref} from "vue";
import {CarportBo, CarportSearchBo, CarportVo} from "@/dto/Carport/Carport.ts";
import {CarportApi} from "@/api/carport/CarportApi.ts";
import {CarVo} from "@/dto/Car/Car.ts";
import SuperTable from "@/module/table/superTable.vue";
import SuperButton from "@/module/button/superButton.vue";
import SuperDialog from "@/module/dialog/superDialog.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {deletedMessage} from "@/util/FunctionUtil.ts";
import * as querystring from "querystring";

const pageConfig = ref(Page.initPage)
const carportVo = ref(new CarportVo())
const carportBo = ref(new CarportBo())
const carportSearchBo = ref(new CarportSearchBo())
const carportApi = ref(new CarportApi())
const initTable = ref<Array<CarportVo>>([])
const selectionCarportVo = ref<Array<CarportVo>>([])
const editDialog = ref(false)

async function initTableData(page: Page) {
    carportSearchBo.value = new CarportSearchBo(page.pageSize, page.page)
    let result = await carportApi.value.pageAll(carportSearchBo.value)
    initTable.value = result.data?.content ?? []

    pageConfig.value = new Page(page.page, page.pageSize, <number>result.data?.totalPages, <number>result.data?.totalElements)
}

function add() {
    carportVo.value = new CarportVo()
    editDialog.value = true
}

async function edit(row: CarportVo) {
    carportVo.value = {...row}
    editDialog.value = true
}

async function deleted(row: CarportVo) {
    deletedMessage(async () => {
        carportSearchBo.value.id = row.id
        let result = await carportApi.value.deleted(carportSearchBo.value)
        ElMessage.success("删除成功")
        await initTableData(pageConfig.value)
    })
}

async function deletedAll() {
    deletedMessage(async () => {
        let searchBoList = selectionCarportVo.value.map(item => {
            let searchBo = new CarportSearchBo()
            searchBo.id = item.id
            return searchBo
        })
        let result = await carportApi.value.deletedAll(searchBoList)
        ElMessage.success("删除成功")
        await initTableData(pageConfig.value)
    })
}

async function save() {
    let result = await carportApi.value.edit(carportBo.value.fromVo(carportVo.value))
    await initTableData(pageConfig.value)
    editDialog.value = false;
}

function selection(valList: Array<CarportVo>) {
    selectionCarportVo.value = valList as Array<CarportVo>
}

function current(row:CarportVo){
    carportVo.value = row
}

function simulateIn(){
    ElMessageBox.prompt("请输入车牌","模拟停车",{
        cancelButtonText: '取消',
        confirmButtonText: "确定"
    })
        .then(async (row)=>{
            carportVo.value.carPlate = row
            carportVo.value.isParking = true
            await save()
        })
}

async function simulateOut(){
    carportVo.value.carPlate = undefined
    carportVo.value.isParking = true
    await save()
}

</script>

<template>
    <super-table
            :page="pageConfig"
            :data="initTable"
            :column-list="CarportVo.getColumn()"
            @init="initTableData"
            @selection="selection"
            @current="current"
    >
        <template #header-button>
            <super-button title="添加" type="success" @click="add"/>
            <super-button title="全部删除" type="danger" @click="deletedAll"/>
<!--            <super-button title="模拟停车" type="warning" @click="simulateIn"/>-->
<!--            <super-button title="模拟出车" type="info" @click="simulateOut"/>-->
        </template>
        <template #controls="{row}">
            <super-button title="编辑" type="success" @click="edit(row)"/>
            <super-button title="删除" type="danger" @clic="deleted(row)"/>
        </template>
    </super-table>
    <super-dialog
            title="添加/编辑"
            width="500"
            v-model="editDialog">
        <template #context>
            <el-form>
                <el-form-item label="区号" label-width="70">
                    <el-input v-model="carportVo.area"/>
                </el-form-item>
                <el-form-item label="车位号" label-width="70">
                    <el-input v-model="carportVo.code"/>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <super-button
                    title="取消"
                    type="info"
                    @click="editDialog = false"
            />
            <super-button
                    title="保存"
                    type="success"
                    @click="save"
            />
        </template>
    </super-dialog>
</template>

<style scoped>

</style>